<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../static/css/smsLogin.css">
    <!--<script src="../static/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="../static/css/smsLogin.css">-->

</head>
<body>

<div class="limiter">
    <div class="container-login100">
        <div class="wrap-login100">
            <div class="login100-form-title" style="background-image: url(../static/image/bg-01.jpg);">
                <span class="login100-form-title-1">电影数据可分析验证码登录</span>
            </div>
            <form class="login100-form validate-form">
                <div class="wrap-input100 validate-input m-b-26" data-validate="手机号不能为空">
                    <span class="label-input100">手机号</span>
                    <input class="input100" id="phone" type="text" name="phone" placeholder="请输入手机号">
                    <div class="input100msg">
                        <span class="getCode">获取短信验证码</span>
                        <span class="msg">验证码发送成功</span>
                    </div>
                    <span class="focus-input100"></span>
                </div>
                <div class="wrap-input100 validate-input m-b-18" data-validate="验证码不能为空">
                    <span class="label-input100">验证码</span>
                    <input class="input100" id="code" type="code" name="code" placeholder="请输入验证码">
                    <span class="focus-input100"></span>
                </div>
                <div class="container-login100-form-btn">
                    <button id="smsCodeLogin" class="login100-form-btn">登 录</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.querySelector('form').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止浏览器的默认行为  阻止表单提交
    });
    $('.getCode').click(function(){
        var phone = $('#phone').val();
        $.ajax({
            method:"get",
            url:"/train/SMSCode?phone="+phone,
            success:function (response) {
                var json = JSON.parse(response);
                if(json.code == 200){
                    $('.getCode').hide();
                    $('.msg').text("验证码发送成功");
                    $('.msg').show();
                    var time = 60;
                    setInterval(function(){
                        $('.msg').text("倒计时"+time+"秒");
                        time--;
                        if(time == 0){
                            $('.msg').hide();
                            $('.getCode').show();
                            time = 60;
                        }
                    },1000)
                }else{
                    $('.getCode').text("重新发送验证码");
                }
            }
        })
    })

    $('#smsCodeLogin').click(function () {

        var phone = $('#phone').val();
        var code = $('#code').val();

        console.log(phone,code);

        $.ajax({
            method:"post",
            url:"/train/login",
            data:{
                "phone":phone,
                "code":code
            },
            success:function (response) {
                var json = JSON.parse(response);
                if(json.code === 200){
                    location.href = "/train/page/success.html";
                }else{
                    alert(json.msg)
                }
            }
        })
    });



</script>

</body>
</html>